<script setup lang="ts">
import pendingIcon from '@/static/images/order_icon.png'
import driverIcon from '@/static/images/driver_i.png'
import phoneIcon from '@/static/images/phone_i.png'
import phoneWithHandsIcon from '@/static/images/phone_with_hands_i.png'
import printIcon from '@/static/images/print_i.png'
import verifyIcon from '@/static/images/verify_i.png'
import { IntercityOrderStatus, OrderStatus } from '@/types/enum'

const props = withDefaults(defineProps<{
  type?: 'normal' | 'intercity'
  status: OrderStatus | IntercityOrderStatus
  driverName?: string
  licensePlateNumber?: string // 车牌号
  autoModel?: string // 车型
  driverMobile?: string // 手机号
  cancelReason?: string // 取消原因
}>(), {
  type: 'normal',
})

const title = computed(() => {
  if (props.type === 'intercity') {
    const titles = {
      [IntercityOrderStatus.已下单]: '订单平台已接收',
      [IntercityOrderStatus.已完成]: '行程已结束',
      [IntercityOrderStatus.待审核]: '取消订单审核中',
      [IntercityOrderStatus.已取消]: '乘客取消',
    }
    return titles[props.status as IntercityOrderStatus]
  }
  else {
    const titles = {
      [OrderStatus.待接单]: '正在呼叫附近司机接单',
      [OrderStatus.待到达]: '司机已接单',
      [OrderStatus.进行中]: '行程进行中',
      [OrderStatus.已完成]: '行程已结束',
      [OrderStatus.待审核]: '取消订单审核中',
      [OrderStatus.已取消]: '乘客取消',
    }
    return titles[props.status as OrderStatus]
  }
})

const description = computed(() => {
  if (props.type === 'intercity') {
    const descriptions = {
      [IntercityOrderStatus.已下单]: '等待平台安排中，将会有工作人员联系您...',
      [IntercityOrderStatus.已完成]: '此订单已完成，感谢您的支持～',
      [IntercityOrderStatus.待审核]: '请耐心等待平台审核...',
      [IntercityOrderStatus.已取消]: props.cancelReason,
    }
    return descriptions[props.status as IntercityOrderStatus]
  }
  else {
    const descriptions = {
      [OrderStatus.待接单]: '您的订单马上会有司机应答，请耐心等待...',
      [OrderStatus.待到达]: '司机正快速赶往目的地，请耐心等待...',
      [OrderStatus.进行中]: '正在赶往下车点，请系好安全带...',
      [OrderStatus.已完成]: '此订单已完成，请及时评价哦～',
      [OrderStatus.待审核]: '此单司机已接单，需要平台审核才能取消...',
      [OrderStatus.已取消]: props.cancelReason,
    }
    return descriptions[props.status]
  }
})

const icon = computed(() => {
  if (props.type === 'intercity') {
    const icons = {
      [IntercityOrderStatus.已下单]: { src: pendingIcon, size: [93, 99] },
      [IntercityOrderStatus.已完成]: { src: phoneWithHandsIcon, size: [104, 100] },
      [IntercityOrderStatus.待审核]: { src: verifyIcon, size: [88, 96] },
      [IntercityOrderStatus.已取消]: { src: printIcon, size: [86, 90] },
    }
    return icons[props.status as IntercityOrderStatus]
  }
  else {
    const icons = {
      [OrderStatus.待接单]: { src: pendingIcon, size: [93, 99] },
      [OrderStatus.待到达]: { src: driverIcon, size: [99, 96] },
      [OrderStatus.进行中]: { src: phoneIcon, size: [64, 100] },
      [OrderStatus.已完成]: { src: phoneWithHandsIcon, size: [104, 100] },
      [OrderStatus.待审核]: { src: verifyIcon, size: [88, 96] },
      [OrderStatus.已取消]: { src: printIcon, size: [86, 90] },
    }
    return icons[props.status as OrderStatus]
  }
})
</script>

<template>
  <view class="rounded-20rpx bg-white">
    <view class="flex items-center justify-between px-30rpx pb-30rpx pt-24rpx">
      <view>
        <Spacer height="14" />
        <view class="leaidng-30rpx text-30rpx text-#333333 font-bold">
          {{ title }}
        </view>
        <Spacer height="24" />
        <view class="text-26rpx text-#999999 font-medium leading-26rpx">
          {{ description }}
        </view>
      </view>
      <image
        :style="{ width: `${icon.size[0]}rpx`, height: `${icon.size[1]}rpx` }"
        :src="icon.src"
      />
    </view>
    <block v-if="type === 'normal' && status !== OrderStatus.待接单">
      <Divider width="642" />
      <view class="flex items-center justify-between px-30rpx py-35rpx">
        <view class="flex items-center">
          <image
            class="h-80rpx w-80rpx"
            src="@/static/images/driver.png"
          />
          <Spacer width="20" />
          <view class="h-80rpx flex flex-col justify-between">
            <view class="flex items-center">
              <view class="text-30rpx text-#333333 font-bold leading-30rpx">
                {{ driverName || '-' }}
              </view>
              <Spacer width="8" />
              <image
                v-for="i in 5"
                :key="i"
                class="h-27rpx w-28rpx"
                src="@/static/images/star_yellow.png"
              />
            </view>
            <view class="flex items-center">
              <view class="border-1rpx border-#999999 rounded-10rpx border-solid p-8rpx text-24rpx text-#333333 font-medium leading-24rpx">
                {{ licensePlateNumber || '-' }}
              </view>
              <Spacer width="12" />
              <view class="text-24rpx text-#333333 font-medium leading-24rpx">
                {{ autoModel || '-' }}
              </view>
            </view>
          </view>
        </view>
        <image
          class="h-57rpx w-57rpx flex-shrink-0"
          src="@/static/images/phone_orange_fill.png"
        />
      </view>
    </block>
  </view>
</template>
